import React from 'react'
import { connect } from 'react-redux'
import { messages } from 'share/common'
import {Button, Modal, Timeline, Spin, Pagination} from 'antd';
import updateLogService from 'containers/help-center-user/update-log/update-log.service';
import config from 'config'
import menuRoute from "routes/menuRoute";
import moment from "moment";
import "styles/help-center-user/update-log.scss"

class UpdateLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      page: 0,
      pageSize: 12,
      pagination: {
        total: 0,
      },
    }
  }

  componentDidMount() {
    this.getUpdateLogList();
  }

  //获取系统消息列表
  getUpdateLogList = () => {
    const {page, pageSize} = this.state;
    let params = {page: page, size: pageSize};
    this.setState({
      loading: true,
    });
    updateLogService.getUpdateLogList(params).then(res => {
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']) || 0,
            current: this.state.page + 1,
            // onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };


  //点击分页
  onChangePaper = (page) => {
    if(page - 1 !== this.state.page){
      this.setState({
          page: page -1 ,
        }, () => {
          this.getUpdateLogList();
        }
      )
    }
  };

  render() {
    const {data, pagination, loading} = this.state;
    return(
      <div className={'update-log'}>
        <Spin spinning={loading}>
        <Timeline>
        {
          data.map((item, index) => {
            return(
              <Timeline.Item key={index}>
                <div style={{marginLeft: 32}}>
                  <div className={'log-version'}>
                    {item.version}
                  </div>
                  <div className={'log-date'}>
                    {moment(item.publishDate).format('YYYY-MM-DD')}
                  </div>
                  <div dangerouslySetInnerHTML={{__html: item.content}}/>
                </div>
              </Timeline.Item>

            )
          })
        }
        </Timeline>
          {
            pagination.total > 12 &&
            <Pagination size="small"
                        defaultPageSize={12}
                        total={pagination.total}
                        onChange={this.onChangePaper}
                        style={{margin:'16px 0 0 42px'}} />
          }
        </Spin>
      </div>
    )
  }
}


UpdateLog.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {

  }
}

export default connect(mapStateToProps)(UpdateLog);
